<template>
    <div class="user">
        <van-nav-bar title="个人信息" left-text="" right-text="" left-arrow @click-left="onClickLeft"
            style="background-color: #F5F5F5;">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>

        <div class="userinfo-per">
            <!-- <van-cell title="头像" is-link style="border-radius: 16px;">
                <template slot="title">
                    <div style="display: flex;">
                        <div
                            style="margin-left: 10px;font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #000000;">
                            头像</div>
                    </div>
                </template>
                <template #right-icon>
                 
                    <van-uploader v-model="fileList"  name="file" :after-read="afterRead" style="width: 40px;height: 40px;"/>
                
                </template>
            </van-cell> -->

            <div style="height: 60px;display: flex;">
                <div
                    style="margin-left: 25px;font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #000000;margin-top: 20px;">
                    头像</div>

                <div style="position: absolute;float: right;right: 40px;">
                    <van-uploader :after-read="afterRead" name="file" v-model="fileList" max-count="1">
                        <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" srcset=""
                            style="width: 40px;height: 40px;margin-top: 10px;border-radius: 50%;">
                        <img v-else src="../../assets/my/photo.png" alt="" srcset=""
                            style="width: 40px;height: 40px;margin-top: 10px;border-radius: 50%;">
                    </van-uploader>
                </div>
            </div>

            <van-cell title="头像" is-link @click="editname">
                <template slot="title">
                    <div style="display: flex;height: 39px;">
                        <div
                            style="margin-left: 10px;font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #000000;">
                            昵称</div>
                    </div>
                </template>
                <template #right-icon>
                    <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #151515;">{{
                        userInfo.nickname }}</div> <van-icon name="arrow" class="search-icon" style="margin-top:5px;" />
                </template>
            </van-cell>


            <van-cell title="头像" is-link @click="editPhone2" style="border-radius: 16px;">
                <template slot="title">
                    <div style="display: flex;height: 39px;">
                        <div
                            style="margin-left: 10px;font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #000000;">
                            手机号</div>
                    </div>
                </template>
                <template #right-icon>
                    <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #151515;">{{
                        userInfo.mobile }}</div> <van-icon name="arrow" class="search-icon" style="margin-top:5px;" />
                </template>
            </van-cell>
        </div>
    </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { upload, updateprofile } from '@/api/user'
import { Toast } from 'vant'
let previousRouterName = ""
let nickname = ""

export default {
    name: 'User',
    components: {

    },

    data() {
        return {
            fileList: []
        };
    },

    created() {
        if (previousRouterName === "editname") {
            this.userInfo.nickname = nickname;
        }


    },
    beforeRouteEnter(to, from, next) {
        previousRouterName = from.name;

        if (from.name === "editname") {
            nickname = from.params.nickname;
        }
        next();
    },
    mounted() {

    },
    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            let imgFile = new FormData();
            imgFile.append("file", this.fileList[0].file);


            upload(imgFile).then((res) => {


                this.updateprofile(res.data.fullurl)

            })
        },
        updateprofile(url) {
            let obj={
                avatar:url
            }
            updateprofile(obj).then((res) => {
                Toast("修改成功")
            })
        },
        onClickLeft() {
            this.$router.back()
        },
        editPhone2() {
            //editPhone

            this.$router.push({
                path: '/editPhone'
            })
        },
        //editname
        editname() {
            this.$router.push({
                path: '/editname'
            })
        }
    },

    computed: {
        ...mapGetters(['userInfo'])
    }
}
</script>

<style scoped>
.userinfo-per {
    width: 702px;
    height: 268px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px !important;
    margin-top: 42px;
    background-color: #fff;
}

/* 覆盖上传图片列表的背景色 */
.van-uploader__preview-wrap {
    background-color: #f4f4f4;
}

/* 覆盖上传图片列表的图片样式 */
/deep/ .van-uploader__preview-image {
    border-radius: 50% !important;
    /* 圆角 */
    object-fit: cover;
    width: 80px !important;
    height: 80px !important;
    margin-top: 20px !important;
    /* 覆盖并按比例缩放图片 */
}


</style>